<template>
	<view class="shop_popup">
		<u-popup :show="isPopup" mode="bottom" :round="20" @close="close" @open="open">
			<view class="shop_wrap">
				<view class="shop_header">
					<view class="header_left">
						<view class="shop_icon" @click.stop="handleAll">
							<image v-if="allSelected" src="/static/business/check.png" mode=""></image>
							<image v-else src="/static/business/off.png" mode=""></image>
						</view>
						Select all<text>（{{totalNumbers||'0'}} items in total）</text>
					</view>
					<view class="header_del" @click.stop="handleDel">
						<image src="/static/business/del.png" mode=""></image>
						<text>Clear all</text>
					</view>
				</view>
				<view class="shop_ul">
					<ul>
						<li v-for="(item,index) in cartList" :key="index">
							<view class="shop_check" @click.stop="handleSelected(item,index)">
								<image v-if="item.selected" src="/static/business/check.png" mode=""></image>
								<image v-else src="/static/business/off.png" mode=""></image>
							</view>
							<dl>
								<dt v-if="item.imgurls">
									<image :src="item.imgurls.split(',')[0]" mode=""></image>
								</dt>
								<dd>
									<view class="item_header">
										<p class="line1">{{item.name}}</p>
										<view class="item_shop">
											<image v-if="item.num>0" src="/static/jian.png"
												@click.stop="handleJian(item,index)" mode="">
											</image>
											<text v-if="item.num>0">{{item.num}}</text>
											<image src="/static/jia.png" @click.stop="handleJia(item,index)" mode="">
											</image>
										</view>
									</view>
									<text>{{item.introduce}}</text>
									<view class="price">
										{{item.discount_price||'0.00'}}Egp<text>{{item.origin_price}}Egp</text>
									</view>
									<view class="discount">
										Discount<text>-10%</text>
									</view>
								</dd>
							</dl>
						</li>
					</ul>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPopup: false,
				allSelected: false
			}
		},
		props: {
			cartList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			// 计算购物车数组总和
			totalNumbers() {
				return this.cartList.reduce((sum, item) => sum + item.num, 0);
			},
		},
		methods: {
			open() {
				this.isPopup = true;
			},
			close() {
				this.isPopup = false;
			},
			handleJian(item, index) {
				if (item.num <= 0) return;
				item.num--;
				if (item.num <= 0) {
					item.selected = false;
					this.cartList[index].selected = item.selected;
				}
				this.cartList[index].num = item.num;
				// let list = this.cartList.filter(product => product.selected).map(product => ({
				// 	...product
				// }));
				this.$emit('change', this.cartList)
			},
			handleJia(item, index) {
				item.num++;
				this.cartList[index].num = item.num;
				// let list = this.cartList.filter(product => product.selected).map(product => ({
				// 	...product
				// }));
				this.$emit('change', this.cartList)
			},
			handleSelected(item, index) {
				item.selected = !item.selected;
				this.cartList[index].selected = item.selected;
				// let list = this.cartList.filter(product => product.selected).map(product => ({
				// 	...product
				// }));
				console.log('选中', this.cartList)
				this.$emit('change', this.cartList)
			},
			handleAll() {
				this.allSelected = !this.allSelected;
				this.cartList.forEach(item => {
					item.selected = this.allSelected;
				});
				// let list = this.cartList.filter(product => product.selected).map(product => ({
				// 	...product
				// }));
				this.$emit('change', this.cartList)
			},
			handleDel() {
				let _this = this;
				_this.cartList = [];
				_this.allSelected = false;
				_this.isPopup = false;
				_this.$emit('change', this.cartList)
			}
		}
	}
</script>

<style>
	/deep/.u-transition {
		bottom: 80px !important;
	}

	/deep/.u-slide-up-enter-to {
		bottom: 80px !important;
	}
</style>
<style lang="scss" scoped>
	.shop_wrap {
		padding: 56rpx 26rpx;

		.shop_header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header_left {
				display: flex;
				align-items: center;
				font-family: Manrope, Manrope;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				.shop_icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 14rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				text {
					font-size: 24rpx;
					color: #999999;
					display: inline-block;
				}
			}

			.header_del {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 6rpx;
				}

				text {
					font-size: 24rpx;
					color: #999999;
				}
			}
		}

		.shop_ul {
			ul {
				li {
					display: flex;
					margin-top: 30rpx;

					.shop_check {
						margin-right: 14rpx;
						margin-top: 52rpx;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					dl {
						display: flex;
						margin-top: 30rpx;
						width: 94%;

						dt {


							image {
								width: 140rpx;
								height: 140rpx;
								border-radius: 20rpx;
								background-color: #F0F0F0;
							}
						}

						dd {
							flex: 1;
							padding-left: 30rpx;
							width: 80%;

							.item_header {
								display: flex;
								justify-content: space-between;
								align-items: center;

								p {
									font-family: Manrope, Manrope;
									font-weight: bold;
									font-size: 28rpx;
									color: #1C120D;
									max-width: 75%;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									width: 75%;

								}

								.item_shop {
									display: flex;
									align-items: center;

									image {
										width: 40rpx;
										height: 40rpx;
									}

									text {
										font-family: Manrope, Manrope;
										font-weight: bold;
										font-size: 28rpx;
										color: #1C120D;
										margin: 0 20rpx;
									}
								}
							}

							>text {
								font-family: Manrope, Manrope;
								font-weight: 400;
								font-size: 28rpx;
								color: #666666;
								line-height: 36rpx;
								display: block;
								max-width: 75%;
							}

							.price {
								font-family: Manrope, Manrope;
								font-weight: 600;
								font-size: 30rpx;
								color: #000000;
								display: flex;
								align-items: center;

								text {
									font-size: 24rpx;
									color: #999999;
									margin-left: 24rpx;
									text-decoration: line-through;
									font-weight: normal;
									display: inline-block;
								}
							}

							.discount {
								font-family: Manrope, Manrope;
								font-weight: 400;
								font-size: 28rpx;
								color: #444444;
								display: flex;
								align-items: center;

								text {
									font-size: 24rpx;
									color: #FC721A;
									margin-left: 24rpx;
									font-weight: normal;
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
	}
</style>